<template>
    <div>
        <el-collapse v-model="activeNames" accordion>
            <el-collapse-item title="查询条件(可点击收起)" name="1">
                <el-form :model="form" ref="searchForm" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="序列号" prop="serial">
                                <el-input v-model="form.serial" clearable placeholder="请输入查询序列号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="型号" prop="model">
                                <el-input v-model="form.model" clearable placeholder="请输入查询型号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="设备名" prop="name">
                                <el-input v-model="form.name" clearable placeholder="请输入查询设备名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="设备标识" prop="identify">
                                <el-input v-model="form.identify" clearable placeholder="请输入查询设备标识"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="部门" prop="department">
                                <el-cascader
                                    v-model="form.department"
                                    :options="departmentList"
                                    :props="{ multiple: true, checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
                                    placeholder="请选择部门"
                                    clearable
                                    filterable
                                ></el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="分类" prop="category">
                                <el-select v-model="form.category" placeholder="请选择设备分类" multiple filterable clearable>
                                    <el-option
                                        v-for="category in categoryList"
                                        :key="category.id"
                                        :label="category.type + ' ' + category.name"
                                        :value="category.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="设备IP" prop="ip">
                                <el-input v-model="form.ip" clearable placeholder="请输入查询设备IP"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="设备MAC" prop="mac">
                                <el-input v-model="form.mac" clearable placeholder="请输入查询设备MAC"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4" :offset="11">
                            <el-button type="primary" @click="fetch" :loading="loading">查询</el-button>
                            <el-button @click="reset('searchForm')">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-collapse-item>
        </el-collapse>

        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%; margin-top: 15px"
            :default-sort="{ prop: 'Category.type', order: 'ascending' }"
            @sort-change="orderBy"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-table-column type="expand" label="详情">
                <template slot-scope="props">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <span>IP: {{ props.row.ip }}</span>
                        </el-col>
                        <el-col :span="6">
                            <span>MAC: {{ props.row.mac }}</span>
                        </el-col>
                        <el-col :span="6">
                            <span>保修开始: {{ props.row.begin }}</span>
                        </el-col>
                        <el-col :span="6">
                            <span>保修截止: {{ props.row.end }}</span>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 20px">
                        <el-col :span="6">
                            <span>标识: {{ props.row.identify }}</span>
                        </el-col>
                        <el-col :span="18">
                            <span>备注: {{ props.row.remark }}</span>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column label="序号" type="index" width="60">
                <template slot-scope="scope">
                    <span>{{ (form.page - 1) * form.pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="serial" label="序列号" sortable="custom"></el-table-column>
            <el-table-column prop="model" label="型号" sortable="custom"></el-table-column>
            <el-table-column prop="name" label="设备名" sortable="custom"></el-table-column>
            <el-table-column prop="Category.type" label="设备分类" sortable="custom">
                <template slot-scope="scope">
                    <span>{{ scope.row.Category.type }} {{ scope.row.Category.name }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="Department.id" label="使用部门" sortable="custom">
                <template slot-scope="scope">
                    <span>{{ scope.row.Department.name }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" width="260px" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="$router.push({ name: 'deviceEdit', params: { id: scope.row.id } })">编辑</el-button>
                    <el-button size="mini" type="primary" @click="$router.push({ name: 'deviceRepairList', params: { id: scope.row.id } })">维修记录</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-row :gutter="20" style="padding: 10px 0">
            <el-col :span="6">
                <el-button @click="$router.push({ name: 'deviceCreate' })" type="primary">添加设备</el-button>
                <el-button type="primary" @click="deviceExport">设备信息导出</el-button>
            </el-col>
            <el-col :span="18">
                <el-pagination
                    background
                    style="float: right"
                    layout="prev, pager, next, sizes, total, jumper"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="form.pageSize"
                    :current-page="form.page"
                    :total="total"
                    @current-change="pageChange"
                    @size-change="sizeChange"
                ></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import qs from 'qs'

export default {
    data() {
        return {
            loading: false,
            activeNames: '1',
            tableData: [],
            form: {
                serial: null,
                name: null,
                model: null,
                identify: null,
                ip: null,
                mac: null,
                category: null,
                department: null,
                prop: 'name',
                order: 'ASC',
                page: 1,
                pageSize: 10,
            },
            total: null,
        }
    },
    computed: {
        categoryList() {
            return this.$store.getters.categoryDNList
        },
        departmentList() {
            return this.$store.getters.departmentList
        },
    },
    async created() {
        Object.assign(this.form, JSON.parse(sessionStorage.getItem('device')))
        this.fetch()
    },
    methods: {
        async fetch() {
            sessionStorage.setItem('device', JSON.stringify(this.form))
            this.loading = true
            const response = await this.$http.get('/deviceList', {
                params: this.form,
                paramsSerializer: (params) => {
                    return qs.stringify(params, { arrayFormat: 'indices' })
                },
            })
            if (response && response.code === 0) {
                // this.total = response.returnObject.count
                // this.tableData = response.returnObject.rows
                ;({ count: this.total, rows: this.tableData } = response.returnObject)
            }
            this.loading = false
        },
        del(row) {
            this.$confirm(`删除序列号为:${row.serial} 的 ${row.name}, 是否继续?`, '警报', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    const response = await this.$http.delete(`/device/${row.id}`)
                    if (response && response.code === 0) {
                        this.tableData.splice(
                            this.tableData.findIndex((item) => item.id === row.id),
                            1
                        )
                        this.$message.success('删除成功')
                    }
                })
                .catch(() => {})
        },
        pageChange(value) {
            this.form.page = value
            this.fetch()
        },
        sizeChange(value) {
            this.form.pageSize = value
            this.fetch()
        },
        orderBy(column) {
            if (column.order === 'descending') {
                this.form.prop = column.prop
                this.form.order = 'DESC'
            } else if (column.order === 'ascending') {
                this.form.prop = column.prop
                this.form.order = 'ASC'
            } else {
                this.form.prop = null
                this.form.order = null
            }
            this.fetch()
        },
        reset(formName) {
            this.$refs[formName].resetFields()
        },
        async deviceExport() {
            const response = await this.$http.get('/deviceExport')
            if (response && response.code === 0) {
                const blob = new Blob([new Int8Array(response.returnObject.data)])
                const downloadElement = document.createElement('a')
                const href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download = '导出文件.xlsx' //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
            }
        },
    },
}
</script>

<style scoped></style>
